<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
   
    label-width="120px"
    class="proj-info-form">
    <el-row>
      <el-form-item label="项目编码" prop="projCode">
        <el-input placeholder="请输入项目编码" 
          v-model="ruleForm.projCode"></el-input>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item
        label="项目名称" prop="projName">
        <el-input placeholder="请输入项目名称"
          v-model="ruleForm.projName" />
      </el-form-item>
    </el-row>   
    <el-row>
      <el-col :span="12">
        <el-form-item
          label="项目经理">
          <CustomTreeSelect
            key="projManager"
            clearable
            show-search
            placeholder="请选择项目经理"
            v-model="ruleForm.projManagerId"
            :tree-data='managerPersonTreeData'
            :tree-props="treeProps"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="商务经理">
          <CustomTreeSelect
            key="projSaleManager"
            clearable
            show-search
            placeholder="请选择商务经理"
            v-model="ruleForm.projSaleManagerId"
            :tree-data='managerPersonTreeData'
            :tree-props="treeProps"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item
          label="所属地区" prop="projRegion">
          <CustomTreeSelect
            clearable
            show-search
            nodeKey="code"
            v-model="ruleForm.projRegion"
            :treeData="projRegionTreeData"
            :treeProps="{
              label: 'name', children: 'children'
            }"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="销售机构">
          <el-select
            v-model="ruleForm.projSaleOrg"
            style="width: 100%;"
            placeholder="请选择销售机构"
            clearable
          >
            <el-option
              v-for="item in projSaleOrgList"
              :key="item.code"
              :label="item.title"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item
          label="项目类型" prop="projType">
          <el-select
            v-model="ruleForm.projType"
            style="width: 100%;"
            placeholder="请选择项目类型"
            clearable
          >
            <el-option
              v-for="item in projTypeList"
              :key="item.code"
              :label="item.title"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="产品类型" prop="productType">
          <CustomTreeSelect
            key="productType"
            clearable
            show-search
            placeholder="请选择产品类型"
            v-model="ruleForm.productType"
            :tree-data='productTypeTreeData'
            :tree-props="treeProps"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item
          label="计划开始时间" prop="projStartDate">
          <el-date-picker type="date"
            v-model="ruleForm.projStartDate"
            placeholder="请选择日期"
            value-format="yyyy-MM-dd"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="计划结束时间" prop="projEndDate">
          <el-date-picker type="date"
            v-model="ruleForm.projEndDate"
            placeholder="请选择日期"
            value-format="yyyy-MM-dd"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item
          label="实际开始时间" prop="realStartDate">
          <el-date-picker type="date"
            v-model="ruleForm.realStartDate"
            placeholder="请选择日期"
            value-format="yyyy-MM-dd"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="实际结束时间" prop="realEndDate">
          <el-date-picker type="date"
            v-model="ruleForm.realEndDate"
            placeholder="请选择日期"
            value-format="yyyy-MM-dd"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item
          label="所属年度" prop="projYear">
          <el-select
            v-model="ruleForm.projYear"
            style="width: 100%;"
            placeholder="请选择年度"
          >
            <el-option
              v-for="item in yearsArrayData"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="项目状态" prop="projStatus">
          <el-select
            v-model="ruleForm.projStatus"
            style="width: 100%;"
            placeholder="请选择年度"
            clearable
          >
            <el-option
              v-for="item in projStatusList"
              :key="item.code"
              :label="item.text"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item
        label="项目说明">
        <el-input
          type="textarea" clearable
          placeholder="（2000字符以内）"
          maxlength="2000"
          :rows="4"
          resize="none"
          show-word-limit
          v-model="ruleForm.projRemark"
        ></el-input>
      </el-form-item>
    </el-row>
  </el-form>
</template>

<script>
import { ProjBaseInfoColumns } from '@/enum/enum-project'
import { yearsData } from '@/enum/enum-common'
import {
  SALE_ORG_SELECT_DATA,
  PROJ_TYPE_SELECT_DATA,
  PROJ_STATUS_SELECT_DATA,
  MANANGE_PERSON_TREE_DATA,
  PROJDUCT_TYPE_SELECT_DATA
} from '@/enum/enum-project'
import { QG_QH_TREE_DATA } from '@/mock/tree-data'

import CustomTreeSelect from '@/components/select/CustomTreeSelect'

// 所属区划数据
const defaultTreeData = [...QG_QH_TREE_DATA[0].children]

export default {
  name: 'ProjInfoForm',
  components: {
    CustomTreeSelect
  },
  props: {
    formData: {
      type: [String, Object]
    }
  },
  data() {
    return {
      ruleForm: {
        ...ProjBaseInfoColumns
      },
      rules: {
        projCode: [
          { required: true, message: '请输入项目编码', trigger: 'blur' }
        ],
        projName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        projRegion: [
          { required: true, message: '请选择所属地区', trigger: 'change' }
        ],
        projType: [
          { required: true, message: '请选择项目类型', trigger: 'blur' }
        ],
        productType: [
          { required: true, message: '请选择产品类型', trigger: 'blur' }
        ],
        projStartDate: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        projEndDate: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        realStartDate: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        realEndDate: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        projStatus: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      treeProps: {
        nodeKey: 'id',
        label: 'title',
        children: 'children'
      }
    }
  },
  computed: {
    managerPersonTreeData: () => MANANGE_PERSON_TREE_DATA,
    projTypeList: () => PROJ_TYPE_SELECT_DATA,
    projStatusList: () => PROJ_STATUS_SELECT_DATA,
    productTypeTreeData: () => PROJDUCT_TYPE_SELECT_DATA,
    projSaleOrgList: () => SALE_ORG_SELECT_DATA,
    projRegionTreeData: () => defaultTreeData,
    yearsArrayData: () => yearsData,
    formRef () {
      return this.$refs.ruleForm
    }
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler (value, oldValue) {
        if (value) this.ruleForm = value
      }
    }
  },
  methods: {
    validateForm () {
      let resValid = false
      this.formRef.validate((valid) => {
        resValid = valid
      })
      return resValid
    },
    getFormData () {
      return { ...this.ruleForm }
    },
    resetForm () {
      this.formRef.resetFields()
      // this.formRef.clearValidate()
    }
  },
}
</script>

<style lang="scss" scoped>

</style>